<template>
	<div class="shopcart">
		<div class="template" v-show="Loading">
			<div><mt-spinner :type="3" :size="60"></mt-spinner></div>
		</div>
		<header class="navigation">
			<div @click="retreat"><img src="../assets/rightbut.png"></div>
			<div>购物车</div>
			<router-link tag="button" to="/cart">完成</router-link>
		</header>
		<div class="goods">
			<div class="shopcart_main" v-for="(data,index) in proData">
				<div class="container">
					
					<input type="checkbox" :value="data.cartId"  class="samecheckbox" v-model="selectArr" v-bind:class="{'check':data.checked}" @click="selectedProduct(data,index)"/>
					<div class="container_left">
						<img :src="data.goodsImg" />
					</div>
					<div class="container_right">
						<p class="container_right_name">{{data.goodsName}}</p>
						<p v-for="(key,item) in data.param" class="specification">规格：{{item}}{{key}}</p>
						<p class="specification_price">
							<span>劵后￥{{data.actualpay.toFixed(2)}}</span>
							<span>￥{{data.originPrice.toFixed(2)}}</span>
						</p>
					</div>
	
				</div>
				<div class="shopcart-footer">
					<button @click="yh(data.id)">领券立减{{data.couponAmount}}元</button>
					<div class="cartcontrol">
						<div class="cart-decrease" @click="reduce()">-</div>
						<div class="cart-count" v-model="data.count">{{data.count}}</div>
						<div class="cart-add" @click="refuel()">+</div>
					</div>
				</div>
			</div>
		</div>
		<!--<div class="del" v-for="(item,index) in proData">
				<ul>
					<li class="pitchli">
						<input type="checkbox"class="newcheckbox" :checked="selectid.length === proData.length" @click="selectAll" /> 全选
					</li>
					<li><button class="collect">加入收藏</button><button class="delete" @click="del()">删除</button></li>
				</ul>
		</div>-->
		
		<div class="del">
				<div><input type="checkbox" :checked="selectid.length === proData.length" @click="selectAll" /> 全选</div>
				<div><button  @click="del()">删除</button></div>
		</div>

	</div>
</template>
<script>
//	import carControl from './carcontrol';
	import { BaseUrl } from '../Baseurl/common.js';
	import { Toast } from 'mint-ui';
	export default {
		data() {
			return {
				bool: true,
				datas: [],
				proData: [],
				selectArr: [],
				selectid:[],
				token: '',
				Loading:true,
			}
		},
		created() {
			
//			console.log(this.$route.path);
			if(this.$route.path === '/tab1') {
				this.bool = false;
			}
			
			this.token = localStorage.getItem('token');
			this.goods();
		},
		//获取的加减的信息
		computed: {
			count: function() {
				var count = 0;
				for(var i in this.proData) {
					count += parseInt(this.proData[i].count);
				}
				return num;
			},
			total: function() {
				var total = 0;
				for(var i in this.proData) {
					total += this.proData[i].count * (this.proData[i].actualpay);
				}
				return total;
			}
		},
		//删除
		methods: {
				yh:function(id) {
					this.$router.push({
						path: '/redpackage?type=1' + "&goodsId=" + id
					})
				},
				del:function() {
					var selectArr = String(this.selectArr);
					var cartId = String(this.selectid);
					if(cartId !=''){
						var url = BaseUrl+'users/delshoppingcart?appId=gzh&token='+this.token+'&cartId='+cartId;
						this.$http.get(url).then(res => {
							if(res.data.code == "10000") {
								Toast({
										message: '删除成功',
										position: 'middle',
										duration: 3000
									});
									this.goods();
								}
							
						}).catch(error=>{
							this.Loading = false;
							Toast({
								message: "网络异常",
								position: 'middle',
								duration: 3000
							})
						})
					}
				},
			//商品信息
			goods(){
				var url = BaseUrl + 'users/myshoppingcart?token=' + this.token + '&appId=gzh';
				this.$http.get(url).then(res => {
					this.Loading = false;
					if(res.data.code == "10000") {
						this.proData = res.data.data;
					}
				}).catch(error=>{
					this.Loading = false;
					Toast({
						message:'网络异常',
						position:'middle',
						duration:3000
					})
				})
			},
			//判断是否选中
			selectedProduct: function(data,index) {
				var id = data.cartId;
				if(data.checked == false){
					data.checked = !data.checked;
					this.selectid.push(id);
				}else if(typeof data.checked == 'undefined'){
					this.$set(data, "checked", true); //局部注
					this.selectid.push(id);
				}else{
					this.selectid.splice( this.selectid.indexOf( id ), 1 );
					data.checked = !data.checked;
				}
			},
			//复选框中的全选和反选
			selectAll(event) {
				var _this = this;
				//就是这实现全选 反选
//				console.log(event.currentTarget.checked)
				if(!event.currentTarget.checked) {
					_this.selectArr = [];
					_this.proData.forEach(function(item, i) {
						_this.$set(item,"checked", false)
					});
					_this.selectid = _this.selectArr;
				} else { //实现全选
					_this.selectArr = [];
					_this.proData.forEach(function(item, i) {
						_this.selectArr.push(item.cartId);
						_this.$set(item,"checked", true)
					});
					_this.selectid = _this.selectArr;
				}
			},
			//减商品按钮点击事件
			reduce:function(){
				if(this.proData.count == 1) {
					alert('该商品一件起售');
					return;
				}
				this.proData.count--;
			},
			//加商品的按钮点击事件
			refuel:function (){
				this.proData.count++;
			},
			//导航退后
			retreat:function(){
//				window.history.go(-1);
				this.$router.push({
					path:'/cart'
				})
			},
		}
	}
</script>

<style scoped="scoped">
	.template{
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.5);
		position: absolute;
		z-index: 99;
	}
	.template div{
		position: absolute;
		top: 5.5rem;
		left: 50%;
		margin-left: -0.6rem;
	}
	.pitchli{
	    display: flow-root !important;
	    font-size:0.35rem;
	}
	.samecheckbox {
		width: 0.4rem;
		height: 0.4rem;
		margin-left: 0.3rem;
		margin-right: 0.3rem;
	}
	
	.pithsty {
		width: 0.35rem;
		height: 0.35rem;
		margin: 0 0.2rem;
	}
	
	.navigation{
		height: 1rem;
		background: #fafafa;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 0.24rem;
		color: #323232;
		font-size: 0.36rem;
	}
	.navigation img{
		width: 0.2rem;
		height: 0.36rem;
		display: block;
	}
	.navigation button{
		border:none;
		outline: none;
		background: #fafafa;
	}
	
	body {
		/*font-size: 10px;*/
		background-color: #f2f2f2;
	}
	
	ul li {
		list-style: none;
	}
	
	.shopcart {
		width: 100%;
		height: 100%;
		background-color: #f2f2f2;
		padding-bottom:1.6rem ;
	}
	
	.checkall {
		border-radius: 100%;
		border: 1px solid #989898;
		height: 0.5rem;
		margin-left: 0.2rem;
		margin-right: 0.2rem;
		width: 0.5rem;
	}
	.goods{
		padding-bottom: 1.6rem;
	}
	.shopcart_header {
		width: 100%;
		height: 1.2rem;
		border-bottom: 1px solid gainsboro;
		display: flex;
		align-items: center;
		background: white;
		justify-content: space-between;
	}
	
	.shopcart_header p {
		margin-left: 40%;
		font-size: 0.4rem;
		font-weight: bold;
	}
	
	.shopcart_header button {
		width: 16%;
		border: 1px solid gray;
		border-radius: 3px;
		background-color: white;
		margin-right: 12%;
		background-color: white;
	}
	
	.shopcart_main {
		width: 100%;
		height: auto;
		background-color: white;
		border-top: 1px solid gainsboro;
		border-bottom: 1px solid gainsboro;
		margin-top: 0.2rem;
	}
	
	.shopcart-footer {
		width: 100%;
		display: flex;
		justify-content: space-around;
		margin-top: -0.1rem;
		border-top: 1px solid gainsboro;
		height: 1.2rem;
	}
	
	.shopcart-footer button {
		/*width: 32%;*/
		border: 1px solid #ff2040;
		height: 0.7rem;
		color: #ff2040;
		border-radius: 5px;
		margin-top: 0.22rem;
		background: white;
	}
	
	.shopcart .shopcart_main .shopcart_title {
		width: 98%;
		height: 1rem;
		border-bottom: 1px solid #E6E6E6;
		display: flex;
		align-items: center;
		margin-left: 2%;
	}
	
	.shopcart .shopcart_main .shopcart_title p {
		margin-left: 0.2rem;
	}
	
	.container {
		display: flex;
		width: 98%;
		/*margin-left: 2%;*/
		align-items: center;
	}
	
	.container_left {
		width: 28%;
		height: 2.1rem;
		border: 1px solid #E6E6E6;
		/*margin-left: 0.3rem;*/
	}
	
	.container_left img {
		width: 100%;
		height: 100%;
	}
	
	.container_right {
		width: 56%;
		height: 3rem;
		margin-left: 0.4rem;
	}
	
	.container_right_name {
		font-size: 0.35rem;
		line-height: 0.4rem;
		margin-top: 0.6rem;
		word-break: break-all;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	
	.specification {
		font-size: 0.27rem;
		color: #808080;
		overflow:hidden;
	    text-overflow:ellipsis;
	    white-space:nowrap
	}
	
	.specification_price span:first-child {
		color: #ff2040;
		font-size: 0.26rem;
		margin-top: -0.3rem;
	}
	
	.specification_price span:last-child {
		color: #808080;
		font-size: 0.26rem;
		text-decoration: line-through;
	}
	
	.cartcontrol {
		width: 25%;
		display: flex;
		margin-top: 0.23rem;
	}
	
	.sum {
		color: red;
		width: 100%;
		margin-left: 10%;
	}
	
	.checkall2 {
		margin-top: 4vh;
		width: 0.4rem;
		height: 0.4rem;
		display: block;
		border: 1px solid #555555;
		margin-left: -1.5rem;
	}
	
	.cartcontrol>div {
		line-height: 30px;
	}
	
	.cart-decrease {
		width: 70%;
		height: 30px;
		background-color: #f7f7f7;
		border-top-left-radius: 5px;
		border-bottom-left-radius: 5px;
		text-align: center;
	}
	
	.cart-count {
		width: 70%;
		height: 30px;
		margin: 0 2%;
		background-color: #e6e6e6;
		text-align: center;
	}
	
	.cart-add {
		width: 70%;
		height: 30px;
		background-color: white;
		border-top-right-radius: 5px;
		border-bottom-right-radius: 5px;
		background-color: #e6e6e6;
		text-align: center;
	}
	.all {
		line-height: 1.4rem;
		margin-left: -3rem;
		font-size: 0.4rem;
	}
	
	.collect {
		width: 100%;
		height: 0.8rem;
		margin-left: -1rem;
		margin-top: 0.3rem;
		background: white;
		border-radius: 10px;
		border: 1px solid gray;
		line-height: 0.8rem;
		margin-right: 0.2rem;
		display: none;
	}
	.del{
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 999;
		background: #fff;
		display: flex;
		justify-content:space-between;
		align-items: center;
		border-top:1px solid #CCCCCC ;
	}
	.del div:nth-child(1){
		margin-left: 1rem;
		display: flex;
		align-items: center;
	}
	.del div:nth-child(1) input{
		width: 0.4rem;
		height: 0.4rem;
		margin-right: 0.2rem;
	}
	.del div:nth-child(2) button{
		background: #FF2040;
		color: #fff;
		height: 0.8rem;
		line-height: 0.8rem;
		padding: 0  1rem;
		border: none;
		outline: none;
	}
</style>